<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的技术学习之路 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .post-container {
            max-width: 800px;
            margin: 100px auto 0;
            padding: 2rem;
        }
        .post-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        .post-header h1 {
            color: var(--secondary-color);
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .post-meta {
            color: #666;
            font-size: 0.9rem;
        }
        .post-content {
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        .post-content p {
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }
        .post-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1.5rem 0;
        }
        .comments-section {
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .comment-form {
            margin-bottom: 2rem;
        }
        .comment-form textarea {
            width: 100%;
            padding: 1rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            margin-bottom: 1rem;
            resize: vertical;
            min-height: 100px;
        }
        .comment-form button {
            background-color: var(--primary-color);
            color: #fff;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .comment-form button:hover {
            background-color: #357abd;
        }
        .comments-list {
            margin-top: 2rem;
        }
        .comment {
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 0;
        }
        .comment:last-child {
            border-bottom: none;
        }
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        .comment-author {
            font-weight: bold;
            color: var(--secondary-color);
        }
        .comment-date {
            color: #666;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
<header class="header">
    <nav class="nav-container">
        <div class="logo">
            <h1>我的博客</h1>
        </div>
        <ul class="nav-links">
            <li><a href="index.html">首页</a></li>
            <li><a href="about.html">关于我</a></li>
        </ul>
    </nav>
</header>
<main class="post-container">
    <article class="post-content">
        <header class="post-header">
            <h1>我的技术学习之路</h1>
            <div class="post-meta">
                <span><i class="far fa-calendar"></i> 2025-06-07</span>
                <span><i class="far fa-folder"></i> 技术分享</span>
            </div>
        </header>
        <div class="post-body">
            <p>分享一下我在学习使用git中的心得体会和遇到的挑战。</p>
            <img src="images/dog.jpg" alt="技术学习配图" style="max-width:100%;height:auto;border-radius:8px;margin:1.5rem 0;">
            <p>学习过程中，我遇到了许多困难，比如推送失败，推送被拒绝等。但正是这些挑战，让我不断成长。</p>
            <p>经过一下午的学习，对于Git的使用方法，我的总结是：</p>
            <ul>
                <li>1.配置用户信息。命令是:git config --global user.name "Luo-luo2052" 和
                    git config --global user.email "your-email@example.com"
                </li>
                <li>2.生成 SSH 密钥。命令是：ssh-keygen -t rsa -C "your-email@example.com"</li>
                <li>3.将公钥添加到 Gitee ，复制 ~/.ssh/id_rsa.pub 的内容 ，登录 Gitee，进入设置 -> SSH公钥 -> 添加公钥</li>
                <li>4.git bash中记得切换目录！！！使用SSH将远程仓库下载到本地自己切换到的那个目录 ：git clone SSH</li>
                <li>5.打开本地仓库提交修改代码后：在Git终端中输入三个命令进行推送：git add .和git commit -m "随便写"
                    和git push -f
                    origin master</li>
            </ul>
            <p>未来我希望能掌握更多前沿技术，参与开源项目，与更多优秀的开发者交流。</p>
        </div>
    </article>
    <section class="comments-section">
        <h2>评论</h2>
        <form class="comment-form" id="commentForm">
            <textarea placeholder="写下你的评论..." required></textarea>
            <button type="submit">发表评论</button>
        </form>
        <div class="comments-list" id="commentsList">
            <!-- 评论将通过 JavaScript 动态添加 -->
        </div>
    </section>
</main>
<footer class="footer">
    <div class="footer-content">
        <p>&copy; 2025 我的个人博客. All rights reserved.</p>
        <div class="social-links">
            <a href="#"><i class="fab fa-github"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</footer>
<button id="back-to-top" title="返回顶部">
    <i class="fas fa-arrow-up"></i>
</button>
<script src="js/script.js"></script>
<script>
    // 评论功能
    const commentForm = document.getElementById('commentForm');
    const commentsList = document.getElementById('commentsList');
    commentForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const textarea = this.querySelector('textarea');
        const commentText = textarea.value.trim();
        if (commentText) {
            const now = new Date();
            const comment = {
                text: commentText,
                author: '访客',
                date: now.toLocaleString()
            };
            addComment(comment);
            textarea.value = '';
        }
    });
    function addComment(comment) {
        const commentElement = document.createElement('div');
        commentElement.className = 'comment';
        commentElement.innerHTML = `
                <div class="comment-header">
                    <span class="comment-author">${comment.author}</span>
                    <span class="comment-date">${comment.date}</span>
                </div>
                <div class="comment-text">${comment.text}</div>
            `;
        commentsList.insertBefore(commentElement, commentsList.firstChild);
    }
</script>
</body>
</html>